<template>
  <div class="ai-helper-container">
    <h2>🧠 AI问卷设计助手</h2>
    <p>请输入你想生成的问题方向，例如：“请生成5道关于大学生就业的问卷题目”</p>

    <el-input
        type="textarea"
        v-model="prompt"
        :rows="4"
        placeholder="请输入问题方向"
        class="input-area"
    />

    <div class="button-group">
      <el-button type="primary" @click="generate" :loading="loading">生成问卷</el-button>
      <el-button @click="clear">清空</el-button>
    </div>

    <div v-if="result" class="result-area">
      <h3>📋 AI 生成结果：</h3>
      <pre>{{ result }}</pre>
    </div>

    <el-alert
        v-if="error"
        title="生成失败，请检查网络或稍后重试"
        type="error"
        show-icon
        :closable="false"
    />
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'AIHelper',
  data() {
    return {
      prompt: '',
      result: '',
      loading: false,
      error: false
    }
  },
  methods: {
    async generate() {
      if (!this.prompt.trim()) {
        this.$message.warning('请输入问题方向')
        return
      }

      this.loading = true
      this.error = false
      this.result = ''

      try {
        const res = await axios.post('/api/ai/question-helper', {
          prompt: this.prompt
        })
        if (res.data && res.data.code === '200') {
          this.result = res.data.data
        } else {
          this.error = true
        }
      } catch (e) {
        console.error('请求失败:', e)
        this.error = true
      } finally {
        this.loading = false
      }
    },
    clear() {
      this.prompt = ''
      this.result = ''
      this.error = false
    }
  }
}
</script>

<style scoped>
.ai-helper-container {
  max-width: 800px;
  margin: 30px auto;
  padding: 24px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.input-area {
  margin-bottom: 16px;
}

.button-group {
  margin-bottom: 20px;
}

.result-area {
  background-color: #f9f9f9;
  padding: 16px;
  border-radius: 6px;
  white-space: pre-wrap;
  word-break: break-word;
  border-left: 4px solid #409EFF;
}
</style>
